<template>
  <view>
    <view v-if="tabType == 'obj'" class="rowtab" :style="tabStyle">
      <view style="position:relative;" v-for="(item, index) in tabList" :style="way === 'start' ? 'margin-left:40rpx;margin-right:40rpx' : ''" @click="tabClick(index)" :key="index">
        <view class="paddingT15" :style="{ color: current === index ? color : ''}">{{ item.name }}{{ item.num != null ? '（' + item.num + '）' : '' }}</view>
        <view :style="{ width: lineWidth + 'rpx',height: lineHeight + 'rpx',background: current === index ? color : '' }" class="underline"></view>
      </view>
    </view>
    <view v-else-if="tabType == 'underLine'" class="rowtab" :style="tabStyle">
      <view style="position:relative;" v-for="(item, index) in tabList"
            :style="way === 'start' ? 'margin-left:40rpx;margin-right:40rpx' : ''"
            @click="tabClick(index)" :key="index">
        <view class="paddingT15" :style="{ color: current === index ? textColor : textNoAcColor,
        'font-weight': current === index ? 500 : 400, 'font-size': textSize }"
              style="font-size: 26rpx;">{{ item }}</view>
        <view :style="{ width: lineWidth + 'rpx',height: lineHeight + 'rpx',background: current === index ? underLineColor : '' }"
              class="underline" style="border-radius: 3rpx"></view>
      </view>
    </view>
    <view v-else class="rowtab" :style="tabStyle">
      <view style="position:relative;" v-for="(item, index) in tabList" :style="way === 'start' ? 'margin-left:40rpx;margin-right:40rpx' : ''" @click="tabClick(index)" :key="index">
        <view class="paddingT15" :style="{ color: current === index ? color : ''}">{{ item }}</view>
        <view :style="{ width: lineWidth + 'rpx',height: lineHeight + 'rpx',background: current === index ? color : '' }" class="underline"></view>
      </view>
    </view>
  </view>

</template>

<script>
export default {
  props: {
    textNoAcColor: {
      type: String,
      default: '#555'
    },
    tabType: {
      type: String,
      default: ''
    },
    lineStyle: {
      type: String,
      default: 'default'
    },
    // tab数据
    tabList: {
      type: Array,
      default: () => []
    },
    // tab颜色
    color: {
      type: String,
      default: '#222222'
    },
    underLineColor: {
      type: String,
      default: '#222222'
    },
    // tab样式
    tabStyle: {
      type: String,
      default: () => ''
    },
    textSize: {
      type: String,
      default: () => ''
    },
    textColor: {
      type: String,
      default: () => '#97ADD5'
    },
    // 下划线高度
    lineHeight: {
      type: Number,
      default: 4
    },
    // 下划线长度
    lineWidth: {
      type: Number,
      default: 80
    },
    way: {
      type: String,
      default: 'between'
    },
    defaultIndex: {
      type: Number,
      default: 0
    }
  },
  watch: {
    defaultIndex: {
      handler (val) {
        this.current = val
      },
      immediate: true,
      deep: true
    }
  },
  data () {
    return {
      oldCurrent: 0,
      current: 0,
      wayObj: {
        'start': 'flex-start',
        'end': 'flex-end',
        'around': 'space-around',
        'between': 'space-between'
      },
      enterTime:'',
      outTime: "",
      stayTime: "",
    }
  },
  created() {
    this.enterTime = new Date();
  },
  methods: {
    tabClick (val) {
      if (this.current === val) return
      this.oldCurrent = this.current
      this.current = val
      this.$emit('click', val)
      // 记录切换时间
      this.outTime = new Date();
      const stayTime = this.outTime.getTime() - this.enterTime.getTime()
      this.enterTime = this.outTime
      this.$emit('changeTime', {oldCurrent: this.oldCurrent, time: Number(stayTime) / 1000})
    }
  }
}
</script>

<style lang="scss" scoped>
.rowtab {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
  padding: 30rpx 0 0;
}
.underline {
  margin: 0 auto;
  border-radius: 10rpx !important;
}
.paddingT15 {
  padding: 15rpx 0;
}
</style>